<template>
	 <view id="body">
		 <!-- 公告 -->
		 <view class="news" style="margin-top: 8rpx;">
		 	<u-notice-bar :text="news"
		 	bgColor="#ffffff"
			color="#3c9cff"
		 	></u-notice-bar>
		 </view>
		 <!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper
				:list="listimg"
				previousMargin="30"
				nextMargin="30"
				circular
				autoplay="true"
				interval=3000
				radius="5"
				bgColor="#ffffff"
			></u-swiper>
		</view>
		<!-- 分类 -->
		 <view>
		    <u-grid :border="false" @click="click" col="4">
		        <u-grid-item v-for="(baseListItem,baseListIndex) in baseList":key="baseListIndex">
		            <text :class="baseListItem.title":customStyle="{paddingTop:20+'rpx'}" style="margin-top: 20rpx; width: 64rpx; height: 64rpx;"></text>
		            <text class="grid-text" style="color:#000000;">{{baseListItem.name}}</text>
		        </u-grid-item>
		    </u-grid>
		    <u-toast ref="uToast" />
		</view>
		<!-- 我要上首页 -->
		<u-divider text="优质内容"></u-divider>
		<view id="inde-ximg">
			<image v-for="(item,index) in indexImgList" :key="index" :src="item.url" class="myimg" @click="indeximgclick(index)"></image>
		</view>
		<!-- 订单信息导航栏 -->
		<view>
			<u-divider text="订单中心"></u-divider>
		    <u-tabs :list="classify" @click="fl()"></u-tabs>
		</view>
		<view id="order">
			<view class="order-card" v-for="(item) in orderList" :key="item.id">
				<view class="userimg">
					<u-avatar :src="item.img" size="100rpx"></u-avatar>
				</view>
				<text class="ordername">{{item.name}}</text>
				<text class="ordertitle">{{item.title}}</text>
				<text class="orderitem">{{item.item}}</text>
				<text class="ordertype">{{item.type}}</text>
				<text class="orderprice">{{item.price}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news: '管理员测试中',//公告信息
				listimg: [  //轮播图数据
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				classify:[
					{
						name: '帮我买',
				    }, 
					{
				        name: '帮我做',
				    },
					{
				        name: '帮我送'
				    }, 
					{
						name:"跳蚤市场"
					},
					{
						name:"失物招领"
					},
					{
						name:"任务中心"
					},
					],
				baseList: [
					{
						name: '懒人社区',
				        title: 't-icon t-icon-shequ'
				    },
				    {
				        name: '失物招领',
				        title: 't-icon t-icon-shiwuzhaoling'
				    },
					{
						name: '任务中心',
						title:'t-icon t-icon-renwu'
					},
					{
					    name: '跳蚤市场',
					    title: 't-icon t-icon-xinniantubiaomoban-15'
					},
					{
						name:'表白墙',
						title:'t-icon t-icon-biaobaiqiang'
					},
					{
						name:'学习中心',
						title:'t-icon t-icon-xuexizhongxin'
					},
					{
						name:'以物换物',
						title:'t-icon t-icon-jiaohuan'
					},
				    ],
				indexImgList: [
					{
						id:'',
						url:"https://cdn.uviewui.com/uview/swiper/swiper3.png"
					},
					{	
						id:'',
						url:'https://cdn.uviewui.com/uview/swiper/swiper1.png'
					},
					{
						id:'',
						url:'https://cdn.uviewui.com/uview/swiper/swiper2.png'
					}
				],
				orderList:[
					{
						id:"",
						img:"https://cdn.uviewui.com/uview/album/1.jpg",
						name:"管理员",
						title:"帮忙代取快递",
						type:"代取",
						price:8,
						item:"3KM",
					},
					{
						id:"",
						img:"https://cdn.uviewui.com/uview/album/2.jpg",
						name:"洁白的小芳",
						title:"帮忙购买商品",
						type:"代购",
						price:8,
						item:"3KG",
					},
					{
						id:"",
						img:"https://cdn.uviewui.com/uview/album/3.jpg",
						name:"把手给我",
						title:"帮忙代取快递",
						type:"代取",
						price:6,
						item:"2KG",
					},
					{
						id:"",
						img:"https://cdn.uviewui.com/uview/album/4.jpg",
						name:"想念我的猫",
						title:"帮忙代取快递",
						type:"代取",
						price:12,
						item:"5KG",
					}
				]
			}
		},
		onLoad() {
			
		},
		onPullDownRefresh() {
			console.log('触发了下拉刷新')
			uni.stopPullDownRefresh()
		},
		// 上拉加载
		onReachBottom() {
			console.log('触发了上拉加载')
			var list = [
				{
					id:"",
					img:"https://cdn.uviewui.com/uview/album/1.jpg",
					name:"亲爱的",
					title:"帮忙代取快递",
					type:"代取",
					price:8,
					item:"3KM",
				},
				{
					id:"",
					img:"https://cdn.uviewui.com/uview/album/2.jpg",
					name:"求黑的小李",
					title:"帮忙购买商品",
					type:"代购",
					price:8,
					item:"3KG",
				},
				{
					id:"",
					img:"https://cdn.uviewui.com/uview/album/3.jpg",
					name:"没名字的我",
					title:"帮忙代取快递",
					type:"代取",
					price:6,
					item:"2KG",
				},
				]
			// this.orderList = this.orderList.concat(list)//加载数据
		},
		methods: {
			 click(name) {
				 console.log(name)
			 },
			 // 订单中心导航
			 fl(itme){
				if(itme.name == "帮我做"){
					var list = [
						{
							id:"",
							img:"https://cdn.uviewui.com/uview/album/1.jpg",
							name:"无花果",
							title:"帮忙代取快递",
							type:"代取",
							price:4,
							item:"3KM",
						},
						{
							id:"",
							img:"https://cdn.uviewui.com/uview/album/2.jpg",
							name:"大母牛",
							title:"帮忙购买商品",
							type:"代购",
							price:8,
							item:"3KG",
						},
						{
							id:"",
							img:"https://cdn.uviewui.com/uview/album/3.jpg",
							name:"小小鸭",
							title:"帮忙代取快递",
							type:"代取",
							price:6,
							item:"2KG",
						},
					]
					this.orderList = list
				}
			 },
			 indeximgclick(index){
				 console.log(this.indexImgList[index].url)
			 }
		},
		options:{
			styleIsolation:"shared"
		}
	}
</script>

<style>
	@import url("@/static/css/index.css");
	page {
		background-color: #f5f5f5;
	}
</style>
